<template>
    <div class="shop page">
        <formHeader tBack :title="'店铺首页'"></formHeader>
        <cube-scroll
                ref="scroll"
                class="goodScroll"
                :data="goodsList"
                :options="options"
                @pulling-up="freshList"
                onload="freshScroll"
        >
            <div class="shopHeader">
                <userShop
                        :nowOrderNum="extra.nowOrderNum"
                        :shopInfo="extra.shop"
                        :nowPrice="extra.nowPrice"
                        :totalOrderNum="extra.totalOrderNum"
                        :totalPrice="extra.totalPrice"
                        :totalIncome="extra.totalIncome"
                        :downIncome="extra.downIncome"
                ></userShop>
            </div>
            <div class="con">
                <div class="title">商品管理</div>
                <shopList @freshScroll="freshScroll" @freshList="changState" :leftList="leftList" :rightList="rightList"></shopList>
            </div>
        </cube-scroll>

        <div class="pushGoods" @click="turn('/form')">添加商品</div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import userShop from '@/components/users/user-shop'
    import shopList from '@/components/users/shop-list'
    import {info,getShopInfo} from "@/api/user"
    import {getGoodsList} from '@/api/shop'
    export default {
        name: "index",
        components:{formHeader,userShop,shopList},
        data(){
            return{
                goodsList:[],
                options:{
                    pullUpLoad: true
                },
                extra:{},
                leftList:[],
                rightList:[],
                page:1
            }
        },
        methods:{
            turn(path){
                this.$router.push({
                    path
                })
            },
            freshList(){
                getGoodsList(this.page).then(res=>{
                    // console.log(res.data)
                    if (this.page ==1){
                        this.goodsList = res.data
                    }else {
                        this.goodsList = this.goodsList.concat(res.data)
                    }
                    this.leftList = []
                    this.rightList = []
                    this.goodsList.forEach((item,index)=>{
                        if (index%2==0){
                            this.leftList.push(item)
                        }else {
                            this.rightList.push(item)
                        }
                    })
                    this.page++
                })
            },
            freshScroll(){
                this.$nextTick(()=>{
                    this.$refs.scroll.refresh()
                })
            },
            changState(e){
                this.leftList = []
                this.rightList = []
                this.goodsList.forEach((item,index)=>{
                    if (item.id==e){
                        item.shelf=0
                    }
                    if (index%2==0){
                        this.leftList.push(item)
                    }else {
                        this.rightList.push(item)
                    }
                })
            }
        },
        created() {
            getShopInfo().then(res=>{
                this.extra = res.extra
                // console.log(this.extra)
            })
            this.freshList()
            this.freshScroll()

        },
        mounted() {
            this.freshScroll()
        }

    }
</script>

<style scoped lang="stylus">
.shop
    height 100%
    background-color $page-bg
    .shopHeader
        margin-top 47px
        padding 20px 15px
        background url('~@/assets/bigbg.png') no-repeat
        background-size 375px 155.5px
    .con
        padding 0 10px
        padding-bottom 40px
        .title
            color #333
            font-size 15px
            font-weight 800
            margin-bottom 9.5px
    .pushGoods
        width 100%
        height 40px
        text-align center
        color #fff
        font-size 18px
        position fixed
        bottom 0
        z-index 998
        line-height 40px
        background-color: #00A390
        border-top 1px solid #F0F0F0
</style>